import cn from "classnames";
import type { FunctionalComponent, StyleValue } from "vue";
import styles from "./Button.module.scss";

type ButtonProps = {
  type?: "submit" | "reset" | "button" | undefined;
  class?: any;
  style?: StyleValue;
};

type ButtonSlots = {
  default: () => unknown;
};

type ButtonEmits = {
  click: [value: MouseEvent];
};

const Button: FunctionalComponent<ButtonProps, ButtonEmits, ButtonSlots> = (p, { slots, emit }) => {
  const { type, style } = p;
  return (
    <button type={type || "button"} class={cn(styles.button)} style={style} onClick={(e) => emit("click", e)}>
      {slots.default?.()}
    </button>
  );
};

// 猜猜看，如果不写这个会发生什么？
Button.emits = {
  click: (value: MouseEvent) => typeof value === "string",
};

export default Button;
